<template>
	<view>
		<view class="page-body" :style="'min-height:'+windowHeight+'px'">
			<view class="container">
				<view class="box">
					<view class="clearfix" style="padding:24rpx;">
						<view class="fl">我的卡</view>
						<view class="fr all">全部({{bankCard.length}})</view>
					</view>
					<view class="cardList" style="padding:24rpx;">
						<view class="cardItem" v-for="(item,index) in bankCard" @click="chooseBank(item)">
							<view class="bankName">{{item.bank_name}}</view>
							<view class="bankNo">{{item.bank_card}}</view>
							<image class="cBg" src="/bundle_b/static/image/bankCard.png"></image>
							<view style="position: absolute;right: 20rpx;top:24rpx;">
								<u-icon name="edit-pen-fill" color="#fff" size="38" @click.native.stop="toEdit(item)" style="margin-right: 20rpx;"></u-icon>
								<u-icon name="trash-fill" color="#fff" size="38" @click.native.stop='delBank(item,index)'></u-icon>
							</view>
						</view>
						<view style="text-align: center;padding: 300rpx 0;" v-if="bankCard.length==0">
							<image class="emptyImg" src="/static/image/order_null.png">
						</view>
						
					</view>
				</view>
				<view class="btn" @click="addBank">添加银行卡</view>
			</view>
		</view>
	</view>
</template>
 
<script>
import {
		withdrawGetCartList,withdrawDelCard
} from "@/api/user";
export default {
		components: {},
		data() {
			return {
				bankCard:[],
				windowHeight:0,
				userInfo:{},
				thisBankId:''
			};
		},
		methods: {
			toEdit(data){
				uni.navigateTo({
					url:'/bundle_b/pages/mine_bank_add/mine_bank_add?obj='+JSON.stringify(data)
				})
			},
			getBank(){
				withdrawGetCartList({}).then(({
					data,
					code
				}) => {
					if (code == 1) {
						this.bankCard=data
					
					}
					
				})
			},
			chooseBank(data){
				uni.$emit('chooseGetBank', data)
				uni.navigateBack({
					delta: 1
				})
			},
			delBank(data,index){
				uni.showModal({
            title: '温馨提示',
            content: '是否确认删除?',
            confirmColor: '#FF2C3C',
            success: async res => {
                let {
                    confirm
                } = res;
                if (confirm) {
                    withdrawDelCard({
                    	card_id:data.id
                    }).then(({
											data,
											code
										}) => {
											if (code == 1) {
												this.bankCard.splice(index,1)
											}
										})
                }
            }
        });
			},
			addBank(){
				// if(this.bankCard.length>=1){
				// 	uni.showToast({title: '只能绑定一张银行卡',icon: 'none'});
				// 	return
				// }
				uni.navigateTo({
					url: '/bundle_b/pages/mine_bank_add/mine_bank_add'
				})
			}
		},
		onLoad(){
			var that=this
			uni.getSystemInfo({
			    success: function (res) {
			    	that.windowHeight=res.windowHeight
			    }
			});
		},
		onShow: function (option) {
				this.getBank()
    }
	}

</script>
<style>
.page-body{
	background:#f6f6f6;
}
.container{
	width: 702rpx;
	margin:0rpx auto;
	padding-bottom: 120rpx;
	padding-top: 40rpx;
	
}
.all{
	width: 115rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	border: 1px solid #FFC007;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #FFC007;

}
.box{
	background:#fff;
}
.cardItem{
	position: relative;
	width: 100%;
	height: 240rpx;
	background: #04B0A4;
	border-radius: 6rpx;
	margin-bottom: 20rpx
}
.cardItem:nth-child(2n){
	background: #1A66A4;
}
.cardItem:nth-child(3n){
	background: #cc3158;
}
.cBg{
	width: 152rpx;
	height: 148rpx;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 8
}
.bankName{
	font-size: 30rpx;
	color: #FFFFFF;
	margin-left: 40rpx;
	padding-top: 50rpx;
}
.bankNo{
	font-size: 40rpx;
	color: #FFFFFF;
	margin-left: 40rpx;
	padding-top: 50rpx;
}
.bankNo text{
	margin-right: 32rpx

}
.btn{
	width: 750rpx;
	height: 116rpx;
	line-height: 116rpx;
	background: #f5335e;
	font-size: 36rpx;
	color: #fff;
	text-align: center;
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	z-index: 9;
}
.emptyImg{
	width: 300rpx;
	height: 300rpx;
}
</style>